<template>
    <TManageLayout>
      <div class="add-course-form">
        <div class="header-container">
          <h2>编辑课程</h2>
          <el-button type="danger" @click="handleDelete" class="delete-button">删除课程</el-button>
        </div>
        <el-form :model="form" :label-position="'top'" label-width="120px">
          <el-form-item label="课程名称">
            <el-input placeholder="请输入课程名称" v-model="form.courseName" :class="{ 'border-blue': form.courseName }"></el-input>
          </el-form-item>
          <el-form-item label="选择教室">
            <el-select placeholder="请选择教室" v-model="form.classroom" :class="{ 'border-blue': form.classroom }">
              <el-option v-for="room in classrooms" :key="room.value" :label="room.label" :value="room.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择排课学期">
            <el-select placeholder="请选择排课学期" v-model="form.term" :class="{ 'border-blue': form.term }">
              <el-option v-for="term in terms" :key="term.value" :label="term.label" :value="term.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="button-container">
          <el-button type="primary" @click="submitForm" class="submit-button" :disabled="!isFormValid">提交</el-button>
        </div>
      </div>
    </TManageLayout>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import TManageLayout from '@/components/TManageLayout.vue';
  import emitter from '@/utils/eventBus';
  import { addCourse, deleteCourse } from '@/api/course';
  
  const router = useRouter();
  const form = ref({
    courseName: '',
    classroom: '',
    term: ''
  });
  
  const classrooms = ref([
    { value: '1', label: '教室101' },
    { value: '2', label: '教室102' }
  ]);
  
  const terms = ref([
    { value: '1', label: '2023-2024学年第一学期' },
    { value: '2', label: '2023-2024学年第二学期' }
  ]);
  
  const isFormValid = computed(() => {
    return form.value.courseName && form.value.classroom && form.value.term;
  });
  
  const submitForm = async () => {
    console.log('提交的表单数据：', form.value);
    
    // 调用添加课程的API
    try {
      // 实际调用API
      await addCourse(form.value);
      
      // 触发更新事件
      emitter.emit('course-added', form.value);
      
      ElMessage.success('课程添加成功');
      
      form.value.courseName = '';
      form.value.classroom = '';
      form.value.term = '';
      
      router.push('/teacher/manager');
    } catch (error) {
      console.error('添加课程错误:', error);
      ElMessage.error(`添加课程失败: ${error.message || '未知错误'}`);
    }
  };
  
  const handleDelete = async () => {
    try {
      await ElMessageBox.confirm('确定要删除这门课程吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      
      await deleteCourse(form.value.id); // 需要后端提供删除API
      emitter.emit('course-deleted', form.value.id);
      ElMessage.success('课程删除成功');
      router.push('/teacher/manager');
    } catch (error) {
      if (error !== 'cancel') {
        console.error('删除课程错误:', error);
        ElMessage.error(`删除课程失败: ${error.message || '未知错误'}`);
      }
    }
  };
  </script>
  
  <style scoped>
  .submit-button {
    width: 200px;
    height: 40px;
    background-color: #13227a;
    border-color: #13227a;
  }
  
  .button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  :deep(.el-form-item__label) {
    text-align: left;
  }
  
  .add-course-form {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  :deep(.el-input__wrapper),
  :deep(.el-select .el-input__wrapper) {
    height: 50px;
    line-height: 50px;
    width: 650px !important;
  }
  
  :deep(.el-select) {
    width: 650px !important;
  }
  
  :deep(.el-input),
  :deep(.el-select) {
    --el-component-size: 50px;
    width: 650px !important;
  }
  
  :deep(.el-select__wrapper) {
    height: 50px !important;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 35px;
  }
  
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .delete-button {
    height: 40px;
    padding: 0 20px;
  }
  </style>
  